<template>
    <div>
        <h3>显示界面</h3>
        <a href="/login">登录界面</a> &emsp; <a href="/add">添加界面</a>

        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{ a.Tid }}</td>
                    <td>{{ a.Tname }}</td>
                    <td>{{ a.Type==true?"启用":"禁用" }}</td>
                    <td>{{ moment(a.Tdate).format("YYYY-MM-DD") }}</td>
                    <td>
                        <input type="button" value="删除" @click="dele(a.Tid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(2)">
        <input type="button" value="下一页" @click="page(3)">
        <input type="button" value="尾页" @click="page(4)">
        一共{{suan.pagecount}}页，当前第{{cx.pageindex}}页，一共{{suan.count}}条，每页显示{{cx.pagesize}}条
        <span @change="rong">
            <select v-model="ro">
                <option :value="3">每页3条</option>
                <option :value="5">每页5条</option>
                <option :value="7">每页7条</option>
            </select>
        </span>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import moment from 'moment';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

const data=ref([
    {
      "Tid": 0,
      "Tname": "",
      "Type": null,
      "Tdate": "2025-04-14T09:41:24.286845"
    }
  ])

const cx=ref({
    pageindex:1,
    pagesize:3,
    type:null,
    name:""
})

const suan=ref({
    count:0,
    pagecount:0
})

onMounted(() => {
    list()
})

const page=(val:any)=>{
    if(val==1)
    {
        cx.value.pageindex=1
        list()
    }
    if(val==2)
    {
       if(cx.value.pageindex>1){
        cx.value.pageindex-=1
        list()
       }
    }
    if(val==3)
    {
        if(cx.value.pageindex<suan.value.pagecount)
        {
            cx.value.pageindex+=1
            list()
        }
    }
    if(val==4)
    {
        cx.value.pageindex=suan.value.pagecount
        list()
    }
}

const ro=ref()

const rong=()=>{
    cx.value.pagesize=ro.value
    list()
}

const list=()=>{
    axios.get("https://localhost:7228/api/HouseType/List",{params:cx.value}).then(res=>{
        data.value=res.data.list

        suan.value.count=res.data.count
        suan.value.pagecount=Math.ceil(suan.value.count/cx.value.pagesize)
    })
}

const dele=(val:any)=>{
    if(confirm("确认删除吗"))
    {
        axios.delete("https://localhost:7228/api/HouseType/Delete",{params:{id:val}}).then(res=>{
        if(res.data>0)
        {
            alert("删除成功");
            list()
        }
        else
        {
            alert("删除失败");
        }
    })
    }
}

</script>

<style scoped>

</style>